<template>
    <div id="header">
        <div class="search-bar">
            <div class="search" @click="togameHall">
                <i class="search-icon"></i>
                <span>搜游戏 | 游戏分类 | 游戏大厅</span>
            </div>
        </div>
        <ul class="tab-list" ref="navList">  
            <router-link tag="li" to="/btgame" class="tab-item">
                <span>官方BT</span>
            </router-link>
            <router-link tag="li" to="/discount" class="tab-item">
                <span>精品官服</span>
            </router-link>
            <li class="tab-item" @click="goH5">
                <span>H5游戏</span>
            </li>
            <!-- <router-link tag="li" to="/danji" class="tab-item">
                <span>单机</span>
            </router-link>
            <router-link tag="li" to="/promise" class="tab-item">
                <span>承诺</span>
            </router-link> -->
        </ul>
    </div>
</template>

<script>
    import {logStatus} from 'api/login'
    export default {
        data(){
            return{
              
            }
        },
        methods:{
            togameHall(){
                this.$router.push({
                     path: '/gameHall/1/0'
                });
            },
            goH5(){
                logStatus().then(res=>{
                    if(res.data.error==0){
                        let userid=res.data.content.userid;
                        let agent=res.data.content.agent;
                        let username=res.data.content.username;
                        window.location.href=`http://www.17byh.com/media.php?s=/index/index/a/${agent}/u/${userid}/n/${username}`;
                        
                    }else{
                         this.$router.push({
                            path: '/login',
                            query: {redirect: '/index'}
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/mixins.scss'; 
@import '~styles/variable.scss'; 
    #header{
        position: fixed;
        width: 100%;
        margin: 0 auto;
        left: 0;
        top: 0;
        z-index: 999;
        .search-bar{
            width: 7.5rem;
            margin:0 auto;
            height:0.8rem;
            padding-top:0.08rem;
            background:$color-block;
            .search{
                display:flex;
                width:6.82rem;
                height:0.64rem;
                line-height:0.64rem;
                margin:0 auto;
                background:#fff;
                border-radius:10px;
                .search-icon{
                     width:0.38rem;
                     height:0.38rem;
                     margin: 0.15rem 0.2rem 0 0.3rem;
                     background-size: 0.38rem 0.38rem;
                     background-repeat: no-repeat;
                     @include bg-image('../assets/image/icon_search');
                }
                .icon{
                    font-size:0.4rem;
                    padding:0 0.2rem;
                }
                span{
                    font-size:0.24rem;
                    color:#c7c6cc;
                }
            }
        }
        .tab-list{
            height: 0.76rem;
            display: flex;
            width: 7.5rem;
            margin:0 auto;
            background:#fff;
            border-bottom:1px solid #ddd;
            .tab-item{
                flex: 1;
                height: 0.76rem;
                line-height: 0.76rem;
                text-align:center;
                font-size: $font-size-l;
                &.router-link-exact-active,&.router-link-active{
                    color:$color-block;
                    span{
                        display: inline-block;
                        height:100%;
                        border-bottom:0.06rem solid $color-block;
                    }
                }
            }
            &.active{
                .tab-item{
                    color:$color-text;
                    &.router-link-exact-active,&.router-link-active{
                        color:$color-theme;
                        border-bottom-color: $color-theme;
                    }
                }
            }
        }
    }
</style>